<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title>刘岩-小米登陆</title>
		<style type="text/css">
			* {
				padding: 0;
				margin: 0;
				/*border: 1px solid black;*/
			}
			
			.head {
				margin: 0 auto;
				width: 1130px;
				height: 100px;
				background-color: #FFFFFF;
			}
			
			.main {
				height: 590px;
				background-color: #14212B;
				background-image: url(img/banner.jpg);
				background-repeat: no-repeat;
				background-position: center;
			}
			
			.main .d1 {
				width: 1130px;
				height: 588px;
				margin: 0 auto;
			}
			
			.main .d1 .d2 {
				width: 400px;
				height: 525px;
				background-color: white;
				float: right;
				margin: 31px 0px;
			}
			
			.main .d1 .d2 .biaodan {
				width: 400px;
				/*height: 215px;*/
				margin: 0 auto;
			}
			.main .d1 .d2 .biaodan .bd2 .warn{
				display: none;
			}
			
			.main .d1 .d2 .biaodan input {
				width: 338px;
				height: 48px;
				margin: 10px 25px;
				border: 1px solid #E0E0E0;
				padding-left: 15px;
				outline: none;
			}
			
			.main .d1 .d2 .biaodan #bd3 input {
				background-color: #F56600;
				color: white;
				font-size: 18px;
				cursor: pointer;
				outline: none;
				border: 0;
			}
			
			/*.main .d1 .d2 .zhuce li {
				list-style-type: none;
				float: left;
				text-align: center;
			}*/
			
			.main .d1 .d2 .zhuce {
				width: 166px;
				height: 22px;
				margin: 0 auto;
			}
			
			.main .d1 .d2 .zhuce p a {
				text-decoration: none;
				color: #999;
				font-size: 14px;
			}
			
			.main .d1 .d2 .zhuce span {
				color: #999;
			}
			
			.main .d1 .d2 .qita {
				width: 360px;
				border-top: 1px solid #999;
				position: relative;
				top: 130px;
				left: 20px;
			}
			
			.main .d1 .d2 .qita span {
				width: 100px;
				height: 22px;
				line-height: 22px;
				border: 0;
				display: block;
				background-color: white;
				position: absolute;
				left: 130px;
				top: -11px;
				font-size: 14px;
				text-align: center;
				color: #BBBBBB;
			}
			
			.main .d1 .d2 .qq {
				width: 338px;
				height: 36px;
				margin: 145px auto;
				text-align: center;
			}
			
			.main .d1 .d2 .qq a .sp1 {
				display: inline-block;
				background-image: url(img/qq.png);
				width: 32px;
				height: 32px;
				margin: 0 10px;
			}
			
			.main .d1 .d2 .qq a .sp2 {
				background-image: url(img/wb.png);
				width: 32px;
				height: 32px;
				display: inline-block;
				margin: 0 10px;
			}
			
			.main .d1 .d2 .qq a .sp3 {
				background-image: url(img/zfb.png);
				width: 32px;
				height: 32px;
				display: inline-block;
				margin: 0 10px;
			}
			
			.main .d1 .d2 .qq a .sp4 {
				background-image: url(img/wx.png);
				width: 32px;
				height: 32px;
				display: inline-block;
				margin: 0 10px;
			}
			
			.main .d1 .d2 .qq a .sp1:hover {
				background-image: url(img/qqh.png);
			}
			
			.main .d1 .d2 .qq a .sp2:hover {
				background-image: url(img/wbh.png);
			}
			
			.main .d1 .d2 .qq a .sp3:hover {
				background-image: url(img/zfbh.png);
			}
			
			.main .d1 .d2 .qq a .sp4:hover {
				background-image: url(img/wxh.png);
			}
			
			.foot {
				width: 1130px;
				height: 50px;
				margin: 70px auto;
			}
			
			.foot .foot1 {
				width: 266px;
				height: 40px;
				margin: 0 auto;
			}
			
			.foot .foot2 {
				width: 1130px;
				height: 40px;
				margin: 0 auto;
			}
			
			.foot .foot1 li {
				float: left;
				list-style-type: none;
				text-align: center;
			}
			
			.foot .foot1 li a {
				text-decoration: none;
				color: #757575;
				font-size: 12px;
			}
			
			.foot .foot1 li span {
				padding: 0 15px;
				font-size: 12px;
			}
			
			.foot .foot2 p {
				color: #757575;
				font-size: 12px;
				text-align: center;
			}
			/*.main .d1 .d2 .nav li{
				list-style-type: none;
				padding-right: 50px;
				font-size:24px;
				font-family:arial;
				color: #f56600;
			}*/
			
			.main .d1 .d2 .nav span {
				/*border: 1px solid;*/
				display: inline-block;
				width: 96px;
				height: 27px;
				color: #666;
				font-size: 24px;
				text-align: center;
				vertical-align: middle;
				font-family: sans-serif;
				margin: 30px 45px;
			}
			
			.main .d1 .d2 .nav span #zd1 {
				color: #F56600;
			}
			
			.main .d1 .d2 .nav span:hover {
				color: #F56600;
				cursor: pointer;
			}
			
			.main .d1 .d2 .nav strong {
				display: inline-block;
				color: #666;
				vertical-align: middle;
			}
			
			.main2 {
				width: 400px;
				height: 313px;
				/*border: 1px solid;*/
				position: relative;
				display: none;
			}
			
			.main2 .ewm {
				width: 180px;
				height: 180px;
				margin: 70px auto;
			}
			
			.main2 .app {
				width: 400px;
				height: 52px;
				position: absolute;
				top: 200px;
				text-align: center;
				font-size: 14px;
			}
			
			.main2 .app span a {
				color: #F56600;
				text-decoration: none;
			}
			.warn{
				font-size: 14px;
				color: #EF6700;
				line-height: 26px;
				text-align: left;
				display: none;
				margin-left: 30px;
			}
			.sp5{
				display: inline-block;
				color: white;
				width: 14px;
				height: 14px;
				background-color: #EF6700;
				text-align: center;
				border-radius: 50%;
				line-height: 14px;
			}
			.warn2{
				font-size: 14px;
				color: #EF6700;
				line-height: 26px;
				text-align: left;
				display: none;
				
			}
		</style>
	</head>

	<body>
		<div class="head">
			<div class="logo"><img src="img/mistore_logo.png" /></div>
		</div>
		<div class="main">
			<div class="d1">
				<div class="d2">
					<div class="nav">
						<span id="zd1" onclick="zd(this)">帐号登录</span>
						<strong>|</strong>
						<span id="sd1" onclick="sd(this)">扫码登陆</span>
					</div>
					<div class="main1">
						<div class="biaodan">
							<form id="tj">
								<div id="bd1">
									<input class="user" type="text" name="user" id="username" value="" onblur="na(this)" placeholder="邮箱/手机号码/小米帐号" />
								</div>
								<div id="bd2">
									<input class="pass" type="text" name="password" id="password" value="" onblur="pa(this)" placeholder="密码" />
									<p class="warn"><span class="sp5">!</span> 请输入帐号</p>
									<p class="warn"><span class="sp5">!</span> 用户名不正确</p>
									<p class="warn"><span class="sp5">!</span> 请输入密码</p>
								</div>
								<div id="bd3"><input class="sign" type="button" name="" id="tj" value="立即登陆" onclick="dl()" />
								</div>
							</form>
							
						</div>
						<div class="zhuce">
							<p><a href="">注册小米账号</a><span>|</span><a href="">忘记密码?</a></p>
						</div>
						<div class="qita">
							<span>其他登录方式</span>
						</div>
						<div class="qq">
							<a href=""><span class="sp1"></span></a>
							<a href=""><span class="sp2"></span></a>
							<a href=""><span class="sp3"></span></a>
							<a href=""><span class="sp4"></span></a>
						</div>

					</div>
					<div class="main2">
						<div class="ewm">
							<img src="img/ewm.png" />
						</div>
						<div class="app">
							<p>使用<span><a href=""> 小米商城APP</a></span>扫一扫</p>
							<p>请打开「设置 > 小米帐号 > 右上角扫一扫」扫码登录</p>
						</div>
					</div>
				</div>
			</div>
		</div>
		<div class="foot">
			<div class="foot1">
				<ul>
					<li>
						<a href="">简体</a><span>|</span></li>
					<li>
						<a href="">繁体</a><span>|</span></li>
					<li>
						<a href="">English</a><span>|</span></li>
					<li>
						<a href="">常见问题</a>
					</li>
				</ul>
			</div>
			<div class="foot2">
				<p>小米公司版权所有-京ICP备10046444-<img src="img/ghs.png" />京公网安备11010802020134号-京ICP证110507号</p>
			</div>
		</div>
		<script type="text/javascript">
			function zd(t) {
				t.parentNode.parentNode.children[1].style.display = "block";
				t.parentNode.parentNode.children[2].style.display = "none";
				t.style.color = "#EF6700"
				t.parentNode.children[2].style.color = "#666"
			}

			function sd(q) {
				q.parentNode.parentNode.children[2].style.display = "block";
				q.parentNode.parentNode.children[1].style.display = "none";
				q.style.color = "#EF6700"
				q.parentNode.children[0].style.color = "#666"
			}

			//验证
			var phone = /^1[34578]\d{9}$/
			var em = /^[A-Za-z\d]+([-._]\w+)?[@][A-Za-z]+[.][A-Za-z\d]+([.]\w+)?$/;
			var user = document.getElementById("username");
			var pass = document.getElementById("password");
			
			
			function na(t){
				if(user.value.trim() != ""){
				if((!(phone.test(user.value)))&&!(em.test(user.value))){
					console.log(user.parentNode.parentNode.children[1].children[2]);
					user.parentNode.parentNode.children[1].children[2].style.display = "block"
					user.parentNode.parentNode.children[1].children[1].style.display = "none"
					user.parentNode.parentNode.children[1].children[3].style.display = "none"
				}}else if(user.value.trim() == "") {
					user.parentNode.parentNode.children[1].children[1].style.display = "block"
					user.parentNode.parentNode.children[1].children[2].style.display = "none"
					user.parentNode.parentNode.children[1].children[3].style.display = "none"
				}
			}
			
			function pa(q){
				if(pass.value.trim() == "") {
					pass.parentNode.children[3].style.display = "block"
					pass.parentNode.children[1].style.display = "none"
					pass.parentNode.children[2].style.display = "none"
					}
			}
			
			
			
			function dl() {
				if(user.value.trim() != ""){
				if((!(phone.test(user.value)))&&!(em.test(user.value))){
					console.log(user.parentNode.parentNode.children[1].children[2]);
					user.parentNode.parentNode.children[1].children[2].style.display = "block"
					user.parentNode.parentNode.children[1].children[1].style.display = "none"
					user.parentNode.parentNode.children[1].children[3].style.display = "none"
					user.style.border = "1px solid #EF6700"
					pass.style.border = "1px solid #E0E0E0"
				}}else if(user.value.trim() == "") {
					user.parentNode.parentNode.children[1].children[1].style.display = "block"
					user.parentNode.parentNode.children[1].children[2].style.display = "none"
					user.parentNode.parentNode.children[1].children[3].style.display = "none"
					user.style.border = "1px solid #EF6700"
					pass.style.border = "1px solid #E0E0E0"
				}
				else if(pass.value.trim() == "") {
					pass.parentNode.children[3].style.display = "block"
					pass.parentNode.children[1].style.display = "none"
					pass.parentNode.children[2].style.display = "none"
					pass.style.border = "1px solid #EF6700"
					user.style.border = "1px solid #E0E0E0"
				} else {
					document.getElementById("tj").submit();
				}
				
//				console.log(user.parentNode.parentNode.parentNode.children[3]);
				user.parentNode.parentNode.parentNode.parentNode.children[3].style.marginTop="140px";
			}
		</script>
	</body>

</html>